import React from 'react';
import { Row, Col, Upload, message, Button, Popconfirm, Tooltip } from 'antd';
import MaterialLayout from '../../../../layout/MaterialLayout';
import TileMapCanvas from '../../../../controls/TileMapCanvas';
import './style.less';
import Const from '../../../../common/const';
import TileSetTileMap from '../../../../plugins/TileMap/TileSetTileMap';
import { Scrollbars } from 'react-custom-scrollbars';
import EditMaterialDialog from './EditMaterialDialog';
import Utils from '../../../../common/Utils';
import { Tabs } from 'antd';

const MIN_MATERIAL_TIP_TOP = 28;

export default class NewTileSet extends React.Component {

    state = {
        config: {
            materials: []
        },
        scrollTop: 0
    };

    hasMaterial() {
        return this.state.config && this.state.config.materials && this.state.config.materials.length;
    }

    materialTips() {
        let config = this.state.config;
        let materials = config.materials;

        return materials.map((res, i) => <div
            className="materialTip"
            key={i}
            style={
                res.editor && res.editor.startHeight != null ? {
                    top: Math.max(MIN_MATERIAL_TIP_TOP, res.editor.startHeight * config.tileHeight - this.state.scrollTop),
                    zIndex: i
                } : {
                        display: 'none'
                    }
            }
        >
                <Popconfirm placement="rightBottom" title={<span>确认要删除该素材？<br/>如果这样做，该素材上的配置也将一起删除。</span>} onConfirm={() => {
                    materials.splice(i, 1);
                    this.setState({ config });
                }} okText="是" cancelText="否">
                    <Tooltip placement="right" title="删除素材">
                        <Button className="first" type="primary" size="small"><i className="iconfont icon-delete" /></Button>
                    </Tooltip>
                </Popconfirm>

                <Tooltip placement="right" title="编辑素材参数">
                    <Button type="primary" size="small"  onClick={async () => {
                        let result = await this.editMaterialDialog.show(res.copy());
                        if (result.status == 'ok' && result.data) {
                            Object.assign(materials[i], result.data);
                            this.setState({ config });
                        }
                    }}>
                        <i className="iconfont icon-config_s"/>
                    </Button>
                </Tooltip>

                <Tooltip placement="right" title="上移">
                    <Button type="primary" size="small" disabled={i === 0}
                        onClick={() => {
                            materials.splice(i, 1);
                            materials.splice(i - 1, 0, res);
                        }}
                    ><i className="iconfont icon-up" /></Button>
                </Tooltip>

                <Tooltip placement="right" title="下移">
                    <Button className="last" type="primary" size="small" disabled={i === materials.length - 1}
                        onClick={() => {
                            materials.splice(i, 1);
                            materials.splice(i + 1, 0, res);
                        }}
                    ><i className="iconfont icon-down" /></Button>
                </Tooltip>
        </div>);
    }

    render() {
        return <MaterialLayout type='fixHeight'>
            <div id="NewTileSet">
                <div className="tabsPanel">
                    <Tabs type='card' tabPosition='left' onChange={i => {
                        let config = this.state.config;
                        config.messageMaskType = i;
                        this.setState({ config });
                        console.log(config);
                    }}>
                        {[
                            {
                                tab: '图片',
                                key: 'none'
                            },
                            {
                                tab: '通行度',
                                key: 'pass'
                            },
                            {
                                tab: '柜台',
                                key: 'desk'
                            },
                            {
                                tab: '半遮蔽',
                                key: 'grass'
                            },
                            {
                                tab: 'z轴高度',
                                key: 'zIndex'
                            }
                        ].map(e => <Tabs.TabPane key={e.key} tab={e.tab}/>)}
                        
                    </Tabs>
                </div>
                <div style={{ background: '#f0f2f5' }} className="canvasPanel">
                    {
                        this.hasMaterial()
                            ? <div className="materialTips">
                                <div className="materialTip">
                                    <Upload multiple name="file" action="/file/upload.do" accept="image/png" showUploadList={false} onChange={this.onUploadChange.bind(this)}>
                                        <Tooltip placement="right" title="添加素材">
                                            <Button type="primary" size="small">
                                                <i className="iconfont icon-add" />
                                            </Button>
                                        </Tooltip>
                                    </Upload>
                                </div>
                                {this.materialTips()}
                            </div>
                            : <div className="uploadButtonContainer">
                                <Upload.Dragger multiple name="file" action="/file/upload.do" accept="image/png" showUploadList={false} onChange={this.onUploadChange.bind(this)}>
                                    <p>点击或拖动文件到这里上传</p>
                                </Upload.Dragger>
                            </div>
                    }
                    <Scrollbars onUpdate={e => Utils.deepEquals(this.state.scrollTop, e.scrollTop) || this.setState({ scrollTop: e.scrollTop })}>
                        <div className="canvasContainer">
                            <TileMapCanvas
                                style={{
                                    width: Const.TileWidth * Const.PaletteTileCountPerLine,
                                    minHeight: Const.TileWidth * Const.PaletteTileCountPerLine
                                }}
                                config={this.state.config}
                                tileMap={TileSetTileMap}
                                onChange={tileMapCanvas => this.setState({ config: tileMapCanvas.tileMap.config })}
                            />
                        </div>
                    </Scrollbars>

                </div>
                <div className="configPanel">

                </div>
            </div>
            <EditMaterialDialog ref={e => this.editMaterialDialog = e}/>
        </MaterialLayout>;
    }

    onUploadChange(info) {
        if (info.file.status === 'done') {
            if (info.file.response && info.file.response.success) {
                message.success('文件上传成功：' + info.file.response.data.url);
                let config = this.state.config;
                config.materials.push({ src: info.file.response.data.url, type: 'image' });
                this.setState({ config });
            } else {
                message.error('文件上传失败：' + info.file.response.message);
            }
        } else if (info.file.status === 'error') {
            message.error('文件上传失败');
        }
    }
}